<template>
    <div>
        <a-card
            :bordered="false"
            style="margin-top: 24px"
            title="历史数据"
        >
            <!--            表头部分-->
            <div slot="extra">
                <a-range-picker @change="timeRangeChange">
                    <a-icon slot="suffixIcon" type="calendar"/>
                </a-range-picker>
                <a-input-search v-model="keyword" allow-clear enter-button
                                placeholder="请输入环保编码"
                                style="margin-left: 16px; width: 272px;"
                                @search="onSearch"/>
            </div>

            <a-table :columns="columns" :data-source="data" :pagination="false" rowKey="id">

                <div slot="timeRangeSlot" slot-scope="item">
                    <span>{{
                            moment(item.start_time * 1000).format('YYYY-MM-DD hh:mm:ss') + " ~ " + moment(item.end_tine * 1000).format('YYYY-MM-DD hh:mm:ss')
                        }}</span>
                </div>

                <div slot="action" slot-scope="item">
                    <a-button size="small" type="danger" @click="deleteHistoryData(item)">删除</a-button>
                </div>

            </a-table>

            <a-pagination v-model="page" :default-current="2"
                          :pageSize="pageSize"
                          :pageSizeOptions="['5','10', '20', '30', '40']"
                          :showSizeChanger="true"
                          :showTotal="total => `共 ${total} 条`"
                          :total="total"
                          show-quick-jumper
                          @change="onChange" @showSizeChange="onShowSizeChange"/>
        </a-card>
    </div>
</template>

<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {METHOD, request} from "@/utils/request";


const columns = [
    {
        title: '环保编码',
        key: 'locator_mobile',
        dataIndex: 'locator_mobile',
    },
    {
        title: '机械名称',
        dataIndex: 'mach_name',
        key: 'mach_name',
    },
    {
        title: '所属区域',
        key: 'district',
        dataIndex: 'district',
    },
    {
        title: '工作时长（小时）',
        key: 'hours',
        dataIndex: 'hours',
    },
    {
        title: '工作时间范围',
        key: 'timeRange',
        scopedSlots: {customRender: 'timeRangeSlot'},
    },
    {
        title: '操作',
        key: 'action',
        scopedSlots: {customRender: 'action'},
    }
];


export default {
    name: 'StandardList',
    data() {
        return {
            keyword: "",
            columns,
            data: [],
            locale,
            moment,
            page: 1,  // 当前页码
            pageSize: 5, // 每页数量
            total: 0,   // 一共的机器数量
            userID: null,
            timeRange: []
        };
    }, mounted() {
        this.userID = JSON.parse(localStorage.getItem(process.env.VUE_APP_USER_KEY)).id;

        this.getHistoryData(null);
    }, methods: {
        timeRangeChange(value) {
            this.timeRange = value;
            this.getHistoryData();
        },
        onChange(page, pageSize) {
            this.page = page;
            this.pageSize = pageSize;
            this.getHistoryData();
        },
        onShowSizeChange(page, pageSize) {
            this.page = page;
            this.pageSize = pageSize;
            this.getHistoryData(null);
        },
        deleteHistoryData(item) {
            let that = this;
            this.$confirm(
                {
                    title: "删除后将不能恢复，确认退出吗?",
                    onOk() {
                        request("/wkhr/deleteWkhrByid?id=" + item.id, METHOD.DELETE).then(res => {
                            if (res.data.code === 1) {
                                that.getHistoryData(null);
                            } else {
                                that.$message.error(res.data.msg);
                            }
                        })
                    }
                }
            )
        },
        getHistoryData: function () {
            let url = `/wkhr/getWkhr?page=${this.page}&pageSize=${this.pageSize}&userid=${this.userID}`;


            if (this.keyword.trim().length > 0) {
                url += "&input=" + this.keyword;
            }

            if (this.timeRange.length === 2) {
                url += "&startime=" + parseInt(moment(this.timeRange[0]).valueOf() / 1000) + "&endtime=" + parseInt(moment(this.timeRange[1]).valueOf() / 1000);
            }

            request(url, METHOD.GET).then(res => {
                if (res.data.code === 1) {
                    this.data = res.data.data.records;
                    this.total = res.data.data.total;
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        onSearch() {
            this.getHistoryData();
        },
    }
}
</script>

<style lang="less" scoped>
.list-content-item {
    color: @text-color-second;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;

    span {
        line-height: 20px;
    }

    p {
        margin: 4px 0 0;
        line-height: 22px;
    }
}
</style>
